<div style="font-weight:bold;font-size:20px;margin-top: 20px;">${serialNumber}、沿海岸线人口分布分析</div>
<div id="table13-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
</div>

<div id="myecharts13" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图13 常住人口居住地分布特征</div>

<div id="myecharts14" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图14 常住人口工作地分布特征</div>

<div id="myecharts15" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图15 常规活动区域分布特征</div>

<script>
    (function () {

        var dataTable13 = ${dataTable13}
        var dataTable14 = ${dataTable14}

        var dataTable15 = ${dataTable15}

        $("#table13-desc").text("${coastalPopDesc}")
        $(document).ready(function(){
            /*var mapData13 = [{pubArea: "海口", pubCount: 10}, {pubArea: "儋州", pubCount: 813}, {pubArea: "白沙", pubCount: 103}];*/
            var mapEcharts13=echarts.init(document.getElementById('myecharts13'));
            var outdata13 = $.map(dataTable13, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option13 = getOptionMap(outdata13);
            echarts.registerMap('hainan', hainan);
            mapEcharts13.setOption(option13);

            // var mapData14 = [{pubArea: "海口市", pubCount: 10}, {pubArea: "万宁市", pubCount: 813}, {pubArea: "白沙市", pubCount: 103}];
            var mapEcharts14=echarts.init(document.getElementById('myecharts14'));
            var outdata14 = $.map(dataTable14, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option14 = getOptionMap(outdata14);
            echarts.registerMap('hainan', hainan);
            mapEcharts14.setOption(option14);

            // var mapData15 = [{pubArea: "海口", pubCount: 10}, {pubArea: "万宁", pubCount: 813}, {pubArea: "白沙", pubCount: 103}];
            var mapData15 = ${dataTable15}
            var mapEcharts15=echarts.init(document.getElementById('myecharts15'));
            var outdata15 = $.map(mapData15, function(n, i){
                return {
                    name: n.county,
                    value: n.count,
                }
            });
            var option15 = getOptionMap(outdata15);
            echarts.registerMap('hainan', hainan);
            mapEcharts15.setOption(option15);
        });
        function getOptionMap(outdata, map) {
            var mapType = map?map:'hainan'
            var option = {
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        if (params.value) {
                            return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;'
                        } else {
                            return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;'
                        }
                    },
                },
                visualMap: {
                    min: 0,
                    max: 1000,
                    itemWidth: 10,
                    itemHeight: 89,
                    orient: 'horizontal',
                    left: '50',
                    top: '0',
                    text: ['密', '疏'],
                    textStyle: {
                        color: '#666666',
                        fontSize: 13,
                    },
                    inRange: {
                        color: ['#FFFFFF','#ADFF2F','#ADFF2F','#FFA500','#FF4500','#FF0000'],//['#D9EEFF', '#2F9BFF'],
                    },
                    outOfRange: {
                        show: false,
                    },
                },
                geo: {
                    map: mapType,
                    show: true,
                    roam: false,
                    zoom: 1.2,
                    label: {
                        emphasis: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                            show: false,
                        },
                    },
                },
                series: [
                    {
                        type: 'map',
                        map: mapType,
                        aspectScale: 0.75,
                        zoom: 1.2,
                        label: {
                            normal: {
                                formatter: function (para) {
                                    return '{name|' + para.name + '}'
                                },
                                rich: {
                                    cnNum: {
                                        fontSize: 11,
                                        color: '#333333',
                                        align: 'center',
                                    },
                                    name: {
                                        fontSize: 10,
                                        color: '#333333',
                                        align: 'center',
                                        lineHeight: 20,
                                    },
                                },
                                //formatter: '{b}',
                                color: '#333333',
                                show: mapType==='hainan'?true:false,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#D9EEFF',
                                borderColor: mapType==='hainan'?'#ffffff':'#5bacee',
                                borderWidth: 1,
                            },
                            emphasis: {
                                areaColor: '#FFAE00',
                            },
                        },
                        data: outdata,
                        nameMap: {
                                海口: "海口市",
                                三亚: "三亚市",
                                儋州: "儋州市",
                                五指山: "五指山市",
                                琼海: "琼海市",
                                文昌: "文昌市",
                                万宁: "万宁市",
                                东方: "东方市",
                                定安: "定安县",
                                屯昌: "屯昌县",
                                澄迈: "澄迈县",
                                临高: "临高县",
                                白沙: "白沙黎族自治县",
                                昌江: "昌江黎族自治县",
                                乐东: "乐东黎族自治县",
                                陵水: "陵水黎族自治县",
                                保亭: "保亭黎族苗族自治县",
                                琼中: "琼中黎族苗族自治县",
                                南海诸岛: "三沙市"
                            }
                    },
                ],
            }
            return option
        }
    })()
</script>